{%extends 'dbmp_base.html' %}

{% load staticfiles %}
{% load ip_filters %}

<!-- 添加该页面自己需要的 css 模板 -->
{% block css %}
    <link href="{% static 'css/plugins/footable/footable.core.css' %}" rel="stylesheet">
{% endblock %}


<!-- 显示该页面标题 -->
{% block app_title %}操作系(OS)统选择列表{% endblock %}

<!-- 显示该页面主要展示的内容 -->
{% block content %}
<table class="footable table table-stripped toggle-arrow-tiny table-hover">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th class="text-center">主机名</th>
            <th class="text-center">IP地址</th>
            <th class="text-center">别名</th>
            <th class="text-center col-xs-3">操作</th>
        </tr>
    </thead>

    <tbody>
        {% for cmdb_os in pagination.objs %}
        <tr>
            <td class="text-center">{{ forloop.counter }}</td>
            <td class="text-center">
                <a onclick="os_info_to_parent({{ cmdb_os.os_id }}, '{{ cmdb_os.hostname }}', '{{ cmdb_os.ip | f_num2ip }}', '{{ cmdb_os.alias }}')">
                    {{ cmdb_os.hostname }}
                </a>
            </td>
            <td class="text-center">{{ cmdb_os.ip | f_num2ip }}</td>
            <td class="text-center">{{ cmdb_os.alias }}</td>
            <td class="text-center">
                <button type="button" class="btn btn-info" 
                        onclick="os_info_to_parent({{ cmdb_os.os_id }}, '{{ cmdb_os.hostname }}', '{{ cmdb_os.ip | f_num2ip }}', '{{ cmdb_os.alias }}')">
                    <i class="fa fa-check-square-o"></i>
                    选择
                </button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 这里是分页页码 -->
<div class="btn-group">
    <!-- 第一页, 上一页 -->
    {% if pagination.cur_page != 1 and pagination %}
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page=1">
            <i class="fa fa-angle-double-left"></i>
        </a>
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.pre_page }}">
            <i class="fa fa-angle-left"></i>
        </a>
    {% endif %}
    
    <!-- 省略号 -->
    {% if pagination.start_page_omit_symbol %}
        <a type="button" class="btn btn-write btn-outline">
            <i class="fa fa-ellipsis-h"></i>
        </a>
    {% endif %}
    
    <!-- 能点击的页码 -->
    {% for page_item in pagination.page_items %}
        {% if page_item == pagination.cur_page %}
            <a type="button" class="btn btn-primary">{{ page_item }}</a>
        {% else %}
            <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ page_item }}">{{ page_item }}</a>
        {% endif %}
    {% endfor%}
    
    <!-- 省略号 -->
    {% if pagination.end_page_omit_symbol %}
        <a type="button" class="btn btn-write btn-outline">
            <i class="fa fa-ellipsis-h"></i>
        </a>
    {% endif %}
    
    <!-- 下一页, 最后一页 -->
    {% if pagination.cur_page != pagination.all_page and pagination %}
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.next_page }}">
            <i class="fa fa-angle-right"></i>
        </a>
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.all_page }}">
            <i class="fa fa-angle-double-right"></i>
        </a>
    {% endif %}
</div>
{% endblock %}

<!-- 添加该页面自己需要的 js 模板 -->
{% block js %}
    <script src="{% static 'js/content.min.js' %}"></script>
    <script src="{% static 'js/plugins/footable/footable.all.min.js' %}"></script>

    <script>
        $(document).ready(function(){
            // 表个插件
            $(".footable").footable();
        });

        // 传值给父窗口属性
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        function os_info_to_parent(os_id, hostname, ip, alias) {
            parent.$('#cos_id').val(os_id);
            parent.$('#chost').val(ip);
            parent.$('#chostname').html(' <strong>主机名：</strong> ' + hostname);
            parent.$('#cip').html('<strong>IP地址：</strong> ' + ip);
            parent.$('#calias').html('<strong>别名：</strong> ' + alias);
            parent.layer.msg('选择成功', {time: 2000, icon: 1});
            parent.layer.tips('同时发生改变', '#chost', {time: 5000});
            parent.layer.close(index);
        }
    </script>
{% endblock %}
